<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="../jquery-3.3.1.min.js"></script>
</head>
<body>
    <div id="box1">
        <div class="content">
            <ul class="clear" id="ul1">
                <div id="one" width='100'></div>
                <div id="two" width='200'></div>
                <div id="three" width='300px'></div>
                <li>
                    <div>one</div>
                    <span>嘻嘻哈哈</span>
                    <ul id="two">
                        <li>11</li>
                        <li>22</li>
                        <li>33</li>
                    </ul>
                </li>
                <li class="abc">2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
            </ul>
            <div id="bottom">
                <div id="left">
                    <div id="right">
                        <input type="text" name="myname" value="" placeholder="">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(function(){
            // 筛选
            $('li').first().css('border','2px solid red')
            $('li').eq(2).css('border','2px solid blue')

            // hasclass
            console.log($('#ul1 li').hasClass('span')) //false
            console.log($('#ul1 li').hasClass('abc')) // true  abc 是class名

            // is
            console.log($('#ul1 li').is('span')) //false
            console.log($('#ul1 li').is('.abc')) // true  abc 是class名

            // map()
            console.log($('#two li').eq(0).map(function(){
                return $(this).text()
            }))

            // 查找
            $('#ul1').children().css('border','2px solid black')
            $('#two').parent().css('border','5px solid red')
        })
    </script>
</body>
</html>